<!-- 商城 - 九宫格按钮组件 -->
<template>
	<!-- 卡片模式 -->
	<u-card
		v-if="data.card"
		:show-head="data.showHead"
		:margin="data.margin"
		:border="false"
		:head-border-bottom="false"
		:body-style="{ 'padding': '0rpx', 'margin-top': '0rpx' }"
		:head-style="{ 'padding': '28rpx 32rpx 6rpx 32rpx', 'margin-top': '0rpx', 'font-weight': '700' }"
	>
		<view slot="head" style="display: flex;align-items: center;">
			<view style="flex:1;font-size: 34rpx;" @click="titleClick"><u-icon v-if="data.titleIcon" :name="data.titleIcon" :custom-style="{marginRight: '10rpx'}"></u-icon> {{ data.title }}</view>
			<view @click="subTitleClick" >
				<text style="font-size: 24rpx;">{{ data.subTitle }}</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		
		<view slot="body">
			<grid-btn :localdata="data" @click="click"></grid-btn>
		</view>
		
	</u-card>
	<!-- 非卡片模式 -->
	<grid-btn v-else :localdata="data" @click="click"></grid-btn>
</template>

<script>
	import gridBtn from "./grid-btn"
export default {
	components:{
		gridBtn
	},
	name: "vk-mall-grid-card-btn",
	props: {
		localdata:{
			Type:Object
		}
	},
	data: function() {
		// 组件创建时,进行数据初始化
		return {
			data:{
				card:false,
				showHead:false,
				title:"",
				subTitle:"",
				margin:"30rpx",
				
				col:3,
				list:[],
				iconSize:46
			}
		};
	},
	mounted() {
		this.init();
	},
	methods: {
		// 初始化
		init() {},
		click(item){
			this.$emit("click",item)
		},
		titleClick(){
			this.$emit("titleClick");
		},
		subTitleClick(){
			this.$emit("subTitleClick");
		}
	},
	// 监听器
	watch:{
		localdata:{
			deep: true,
			immediate: true,
			handler(newVal, oldVal){
				Object.assign(this.data, newVal);
			}
		},
	},
	// 计算属性
	computed: {}
};
</script>

<style lang="scss" scoped>
	
</style>
